<template>
    <div class="recommendContainer">
        <!-- 轮播图 -->
        <div class="recommend">
            <div class="carousel">
                <el-carousel>
                    <el-carousel-item v-for="item in bannerData" :key="item">
                        <img :src="item" alt />
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <!-- 推荐歌单 -->
        <div>
            <div class="recNav">
                <h2 class="title">推荐歌单</h2>
                <div class="songListItem">
                    <div class="active barItem">每日推荐</div>
                    <div class="barItem">翻唱</div>
                    <div class="barItem">网络</div>
                    <div class="barItem">伤感</div>
                    <div class="barItem">欧美</div>
                    <router-link class="recNavToMusiclist" to="/musiclist">更多></router-link>
                </div>
            </div>
            <ListCard :listCardData="musicList" @clickListCardItem="clickListCardItem"></ListCard>
        </div>
        <!-- 精选活动 -->
        <div class="activityContainer">
            <div class="rec_nav">
                <h2 class="activiTytitle">精选活动</h2>
            </div>
            <div class="actOut">
                <div class="act act1">
                    <a
                        href="https://weibo.com/1738434147/L2Nw91aHs?from=page_1006061738434147_profile&amp;wvr=6&amp;mod=weibotime&amp;type=comment#_rnd1637641138318 "
                        target="_blank"
                    >
                        <img src="https://kwimg2.kuwo.cn/star/upload/49/52/1637725406278_.jpg" alt />
                    </a>
                </div>
                <div class="act">
                    <a
                        href="https://weibo.com/1738434147/KDJqW8T5Q?from=page_1006061738434147_profile&amp;wvr=6&amp;mod=weibotime&amp;type=comment#_rnd1634785919208 "
                        target="_blank"
                    >
                        <img src="https://kwimg4.kuwo.cn/star/upload/81/9/1634884954047_.jpg" alt />
                    </a>
                </div>
            </div>
        </div>
        <!-- 排行榜 -->
        <RankingList></RankingList>
        <!-- 歌手推荐 -->
        <SingerRecommendation></SingerRecommendation>

        <!-- 主播电台 -->
        <AnchorStation></AnchorStation>
    </div>
</template>
git

<script>
import img1 from "./images/ia_100000012.png";
import img2 from "./images/ia_100000013.jpg";
import img3 from "./images/ia_100000014.jpg";
import img4 from "./images/ia_100000015.jpg";
import img5 from "./images/ia_100000016.jpg";

import ListCard from "./components/listCard/index";
import RankingList from "./components/RankingList/index";
import SingerRecommendation from "./components/SingerRecommendation/index";
import AnchorStation from "./components/AnchorStation/index";

import { reqGetListCard } from "../../../api/home";

export default {
    components: { ListCard, RankingList, SingerRecommendation, AnchorStation },
    name: "Recommend",
    data() {
        return {
            // 轮播图数据
            bannerData: [img1, img2, img3, img4, img5],
            musicList: [],
        };
    },
    mounted() {
        reqGetListCard().then((res) => {
            this.musicList = res.result.splice(0, 5);
        });
    },
    methods: {
        //跳转去歌单详情页
        clickListCardItem() {
            this.$router.push({ name: "MusicList" });
        },
    },
};
</script>

<style scoped>
.recommendContainer {
    margin: 0 auto;
    max-width: 1400px;
    min-width: 1180px;
}
/* 轮播图 */
.recommend .el-carousel__item img {
    max-width: 100% !important;
    max-height: 400px !important;
}
/* 推荐歌单 */
.recNav {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    margin-top: 70px;
}
.songListItem {
    width: 338px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 40px;
}
.songListItem div {
    font-size: 14px;
}
.songListItem .active {
    font-size: 16px;
    color: black;
    font-weight: 600;
    padding-bottom: 5px;
    /* border-bottom: 3px solid #ec4141; */
    transform: translateY(4px);
    border-bottom: 2px solid #ffe443;
}
/* 精选活动 */
.activiTytitle {
    margin-bottom: 24px;
    margin-top: 70px;
}
.actOut {
    display: flex;
    justify-content: space-between;
}
.actOut .act {
    width: 49.2%;
    padding-bottom: 16.1%;
    position: relative;
    overflow: hidden;
    margin-bottom: -16.1%;
}
/* .actOut img {
	max-width: 688px;
	max-height: 225px;
} */
/* .actOut .act1 {
	margin-right: 20px;
} */
.recNavToMusiclist {
    text-decoration: none;
    color: black;
    font-size: 14px;
}
</style>
<style>
/* 轮播图 */
/* .el-carousel--horizontal {
	position: relative !important;

} */
.el-carousel__container {
    max-width: 1400px !important;
    max-height: 400px !important;
}
/* .el-carousel--horizontal .el-carousel__indicators {
	position: absolute !important;
	bottom: 60px;
	left: 50%;
} */
</style>
